<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="范珍珍">
        <title>my</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="my.css">
        <link rel="stylesheet" href="base.css">
        <style>
            
        </style>
    </head>
    <body>
<!--底部导航栏-->
        <footer class="footer_ul">
            <ul class="ul_li">
                <li class="same-li color_first"><a href="index.html"><span class="glyphicon glyphicon-home"></span><span>首页</span></a></li>
                <li class="same-li"><a href="home.html"><span class="glyphicon glyphicon-th-list"></span><span>分类</span></a></li>
                <li class="same-li"><a href="cart.html"><span class="glyphicon glyphicon-shopping-cart"></span><span>购物车</span></a></li>
                <li class ="same-li"><a href="my.html"><span class="glyphicon glyphicon-user"></span><span>我的</span></a></li>
            </ul>
        </footer>

<main id="maincontent">
<!--登录注册-->
     <div class="zhuce">
         <img src="image/a.png" alt="">
         <a href=""><span>登录/注册</span></a>
     </div>

<!-- 我的订单-->
<div class="myproduct">
    <span>我的订单</span>
    <a href="">
        <span>全部订单</span>
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

<!--收付款-->
<div class="givemoney">
    <a href="">
        <img src="image/nav-1.png" alt="">
        <h5>代付款</h5>
    </a>
    <a href="">
        <img src="image/nav-1.png" alt="">
        <h5>代收款</h5>
    </a>
    <a href="">
        <img src="image/nav-2.png" alt="">
        <h5>退换修</h5>
    </a>
</div>

<!--各个板块-->
<div class="reset">
    <div class=" same_setting wdyh">  
        <img src="image/i-wallet.png" alt="">
        <p>
            <span>我的优惠</span>
            <span class="glyphicon glyphicon-chevron-right"></span>
        </p>
    </div>
    <div class="same_setting fwzx">  
        <img src="image/i-service.png" alt="">
        <p>
            <span>服务中心</span>
            <span class="glyphicon glyphicon-chevron-right"></span>
        </p>
    </div>
    <div class="same_setting xmzj">  
        <img src="image/i-mihome.png" alt="">
        <p>
            <span>小米之家</span>
            <span class="glyphicon glyphicon-chevron-right"></span>
        </p>
    </div>
    <div class="same_setting shezhi">  
        <img src="image/i-setting.png" alt="">
        <p>
            <span>设置</span>
            <span class="glyphicon glyphicon-chevron-right"></span>
        </p>
    </div>

</div>

</main>
        
        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>

    <script>
        // 底部选中变色
var lis=document.getElementsByClassName('same-li')
for(var i=0;i<lis.length;i++){
    var item_li=lis[i];
    item_li.onclick=function(){
        for(var j=0;j<lis.length;j++){
            var li=lis[j];
            li.className='same-li'
        }
        this.className='same-li color_first'

    }
}
    </script>
</html>